<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml"
      layout:decorate="~{front/common/framework}" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
  <title>版权服务</title>
  <link rel="stylesheet" href="/static/front/css/vip-buy.css">
</head>
<body>
<th layout:fragment="content">
  <div class="container11 wrapper">
    <div class="top">
      <div class="img">
        <img src="/static/front/imgs/zys23.png"/>
      </div>
      <div class="txt">
        <h4>订单提交成功，请尽快付款！</h4>
        <h6>VIP有效期1年</h6>
      </div>
    </div>
    <form action="" method="post" onsubmit="return false">

      <div class="bottom">
        <div class="order-detail">
          <div class="head">
            <h2>订单详情</h2>
            <p>请您在提交订单24小时内完成支付， 如需开发票请联系客服热线：400-999-8242</p>
          </div>
          <div class="table">
            <table border="" cellspacing="0" cellpadding="">
              <tr>
                <th width="20%">订单号</th>
                <th class="second" width="20%">购买时间</th>
                <th class="second" width="20%">VIP类型</th>
                <th class="second" width="20%">作品张数</th>
                <th class="second" width="20%">价格/元</th>
              </tr>
              <tr>
                <td class="order-no">201811200001</td>
                <td class="second order-time">2018-01-09</td>
                <td class="second category-name">个人体验版</td>
                <td class="second service-total">50张</td>
                <td class="second order-price">199.00</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="pay-type">
          <div class="head">
            <h2>选择支付方式</h2>
          </div>
          <div class="body">
            <ul>
              <li><label><input type="radio" class="in-radio" name="pay" value=""/></label><img
                  src="/static/front/imgs/zys194.png"/></li>
              <!-- <li><label><input type="radio" class="in-radio" name="pay" value=""/></label><img
                   src="/static/front/imgs/zys195.png"/></li>-->
            </ul>
          </div>
        </div>
        <div class="sbmt">
          <a href="#" target="_blank" class="pay_href">确定支付</a>
        </div>
      </div>

    </form>

    <div class="pop-edit" id="pop-edit" style="display: none;">
      <div class="pop_head">
        <h4>提示</h4>
      </div>
      <div class="txt">
        <p align="center" style="font-size: 16px;">请您在新打开的页面上完成支付，支付完成前不要关闭此窗口。</p>
      </div>
    </div>
  </div>
</th>
<th:block layout:fragment="script">
  <script type="text/javascript">
    $(function () {
      $(".in-radio").ionCheckRadio();
      $('.header .wrapper .nav ul li').eq(3).addClass("on").siblings().removeClass("on");

      var categoryId = Util.getQueryString('categoryId');

      if (Util.isEmpty(categoryId)) {
        location.href = '/vip-plan';
      }
      $.ajax({
        url: '/member/createOrder',
        type: 'post',
        data: {memberCategoryId: categoryId},
        success: function (result) {
          if(!result.success){
            location.href = '/vip-plan';
            return false;
          }
          result = result.data;
          $('.order-no').html(result.orderNo);
          $('.order-time').html(result.orderTime);
          $('.order-price').html(result.orderPrice);
          $('.category-name').html(result.memberCategoryName);
          $('.service-total').html(result.serviceTotal);
          $('.pay_href').attr('href', '/weixinpay?orderNo=' + result.orderNo);
        },
        error: function () {
          $('.un-login ul li:first a').click();
        }
      })

      $('.pay_href').click(function () {
        layer.open({
          type: 1,
          title: false,
          closeBtn: 0,
          btn: ['支付成功', '支付遇到问题'],
          btnAlign: 'c',
          skin: 'pe',
          area: ['580px', '260px'],
          content: $('.pop-edit'),
          yes: function (index, layero) {
            location.href = '/copyright/manage/my-vip';
          },
          btn2: function () {
            location.href = 'http://www.meisupic.com/about.php?action=questions';
          }
        })
      })
    })

  </script>
</th:block>

</body>
</html>

